<template>
  <div class="articles">
    <h1>所有文章</h1>
    <div class="articles-list">
      <article v-for="article in articles" :key="article.id" class="article-item">
        <img :src="article.image" :alt="article.title" />
        <div class="article-info">
          <h2>{{ article.title }}</h2>
          <p class="summary">{{ article.summary }}</p>
          <div class="meta">
            <span class="date">{{ article.date }}</span>
            <span class="category">{{ article.category }}</span>
          </div>
          <router-link :to="`/article/${article.id}`" class="read-more">阅读全文</router-link>
        </div>
      </article>
    </div>
  </div>
</template>

<script setup>
const articles = [
  {
    id: 1,
    title: 'Vue3 组合式 API 最佳实践',
    summary: '深入探讨 Vue3 组合式 API 的使用技巧和最佳实践，提升开发效率。',
    date: '2024-01-15',
    category: '前端开发',
    image: 'https://picsum.photos/400/250?random=5'
  },
  {
    id: 2,
    title: '现代 CSS 布局技术详解',
    summary: '从 Flexbox 到 Grid，全面解析现代 CSS 布局技术的应用场景。',
    date: '2024-01-10',
    category: 'CSS',
    image: 'https://picsum.photos/400/250?random=6'
  },
  {
    id: 3,
    title: 'JavaScript 性能优化指南',
    summary: '分享 JavaScript 性能优化的实用技巧和工具使用方法。',
    date: '2024-01-05',
    category: 'JavaScript',
    image: 'https://picsum.photos/400/250?random=7'
  },
  {
    id: 4,
    title: '响应式设计原理与实践',
    summary: '掌握响应式设计的核心原理，打造适配多端设备的优秀网站。',
    date: '2023-12-28',
    category: 'UI设计',
    image: 'https://picsum.photos/400/250?random=8'
  },
  {
    id: 5,
    title: 'Git 工作流最佳实践',
    summary: '介绍高效的 Git 工作流和团队协作规范，提升开发效率。',
    date: '2023-12-20',
    category: '工具',
    image: 'https://picsum.photos/400/250?random=9'
  },
  {
    id: 6,
    title: 'Web 安全防护指南',
    summary: '了解常见的 Web 安全威胁，学习有效的防护措施。',
    date: '2023-12-15',
    category: '安全',
    image: 'https://picsum.photos/400/250?random=10'
  }
]
</script>

<style scoped>
.articles h1 {
  text-align: center;
  margin-bottom: 2rem;
  color: #2c3e50;
}

.articles-list {
  max-width: 800px;
  margin: 0 auto;
}

.article-item {
  background: white;
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  display: flex;
  gap: 1.5rem;
  transition: transform 0.3s;
}

.article-item:hover {
  transform: translateY(-3px);
}

.article-item img {
  width: 200px;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.article-info {
  flex: 1;
}

.article-info h2 {
  color: #2c3e50;
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.summary {
  color: #666;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.meta {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.date {
  color: #999;
}

.category {
  background: #3498db;
  color: white;
  padding: 0.2rem 0.8rem;
  border-radius: 20px;
  font-size: 0.8rem;
}

.read-more {
  color: #3498db;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}

.read-more:hover {
  color: #2980b9;
}

@media (max-width: 768px) {
  .article-item {
    flex-direction: column;
  }
  
  .article-item img {
    width: 100%;
    height: 200px;
  }
  
  .meta {
    flex-direction: column;
    gap: 0.5rem;
  }
}
</style>